<template>
  <div class="manager-container">
    <!-- 头部 -->
    <div class="manager-header">
      <div class="manager-header-left">
        <!-- 可以添加左侧标题 -->
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/student/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 主体 -->
    <div class="manager-main">
      <!-- 侧边栏 -->
      <div class="manager-main-left">
        <el-menu
            :default-openeds="['competition', 'course']"
            :default-active="$route.path"
            router
            style="border: none"
        >
          <!-- 竞赛管理模块 -->
          <el-submenu index="competition">
            <template #title>
              <i class="el-icon-trophy"></i><span>竞赛管理</span>
            </template>
            <el-menu-item index="/student/competition/participation">竞赛参与情况</el-menu-item>
            <el-menu-item index="/student/competition/awards">获奖情况</el-menu-item>
          </el-submenu>

          <!-- 课程管理模块 -->
          <el-submenu index="course">
            <template #title>
              <i class="el-icon-reading"></i><span>课程管理</span>
            </template>
            <el-menu-item index="/student/Contest/StudentProgress">课程学习进度</el-menu-item>
            <el-menu-item index="/student/Contest/StudentCourse">课程成绩</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!-- 右侧内容区域 -->
      <div class="manager-main-right">
        <!-- 欢迎卡片 -->
        <el-card class="welcome-card" shadow="hover">
          <h3>欢迎使用竞赛赛与课程</h3>
          <p>在此页面中，您可以查看学生的竞赛参与情况以及课程</p>
        </el-card>

        <!-- 示例统计信息 -->
        <div class="stats">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="stat-card" shadow="hover">
                <div class="card-header">
                  <h4>总参与次数</h4>
                  <i class="el-icon-s-data card-icon" style="color: #42b983;"></i>
                </div>
                <p class="card-stat">{{ totalParticipations }} 次</p>
                <p class="card-description">累计参与的所有竞赛活动。</p>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card class="stat-card" shadow="hover">
                <div class="card-header">
                  <h4>获奖总数</h4>
                  <i class="el-icon-medal-1 card-icon" style="color: #e6a23c;"></i>
                </div>
                <p class="card-stat">{{ totalAwards }} 个</p>
                <p class="card-description">累计获得的奖项总数。</p>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card class="stat-card" shadow="hover">
                <div class="card-header">
                  <h4>当前活跃竞赛</h4>
                  <i class="el-icon-trophy card-icon" style="color: #f56c6c;"></i>
                </div>
                <p class="card-stat">{{ activeCompetitions }} 个</p>
                <p class="card-description">正在参与的竞赛活动。</p>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 动态渲染的子路由 -->
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contest',
  data() {
    return {
      totalParticipations: 0,
      totalAwards: 0,
      activeCompetitions: 0,
    };
  },
  computed: {
    currentTitle() {
      return this.$route.meta.name || '内容展示';
    },
  },
  mounted() {
    this.fetchCompetitionData();
  },
  methods: {
    // 获取竞赛数据
    fetchCompetitionData() {
      const userData = JSON.parse(localStorage.getItem('honey-user'));
      if (userData && userData.name) {
        const studentName = userData.name; // 获取学生姓名

        // 使用 $axios 请求数据
        this.$axios.get(`/student-competition/data?studentName=${studentName}`)
            .then(response => {
              const data = response.data.data; // 后端返回数据格式：data
              this.totalParticipations = data.totalParticipations;
              this.totalAwards = data.totalAwards;
              this.activeCompetitions = data.activeCompetitions;
            })
            .catch(error => {
              console.error("获取竞赛数据失败:", error);
            });
      } else {
        console.error("未找到用户信息");
      }
    }
  }
};
</script>

<style scoped>
.manager-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.manager-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f5f5f5;
}

.manager-header-left .title {
  font-size: 24px;
  font-weight: bold;
}

.manager-main {
  display: flex;
  flex: 1;
}

.manager-main-left {
  width: 240px;
  border-right: 1px solid #e4e7ed;
}

.manager-main-right {
  flex-grow: 1;
  padding: 20px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.card-header h4 {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.card-stat {
  font-size: 24px;
  color: #409EFF;
}

.card-description {
  font-size: 14px;
  color: #888;
}

.card-icon {
  font-size: 40px;
}
</style>
